import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, onSnapshot, doc, setDoc, deleteDoc, writeBatch } from 'firebase/firestore';

// Initialize Firebase with global variables provided by the environment
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

// Initialize Firebase app and services
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);

// --- Icon Components ---
const DeleteIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-red-400 group-hover:text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
  </svg>
);
const EditIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-blue-400 group-hover:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
  </svg>
);
const FrameDownloadIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-green-400 group-hover:text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
    </svg>
);
const UploadIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
  </svg>
);
const GenerateIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
  </svg>
);
const DownloadIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
  </svg>
);
const WhatsappIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.44 1.34 4.93L2 22l5.25-1.39a9.91 9.91 0 004.79 1.29c5.45 0 9.9-4.45 9.9-9.9S17.49 2 12.04 2zM17.46 15.35c-.24.23-.5.23-.74.12-.24-.12-1.03-.5-1.95-1.05-.93-.54-.6-1.57-.42-1.89.18-.32.32-.44.47-.69.15-.24.08-.45-.04-.63-.12-.18-.74-.88-1.01-1.2-.27-.33-.24-.28-.5-.28s-.59.04-.91.04-.54.12-.83.35c-.29.24-1.07 1.05-1.07 2.56s1.1 2.97 1.25 3.17c.15.21 2.12 3.23 4.9 4.39 2.78 1.15 2.78.77 3.3 1.07.51.3 1.01.27 1.39.21.37-.06.9-.32 1.02-.63.12-.31.12-.58.08-.63-.04-.06-.15-.1-.31-.19-.16-.09-.9-.45-1.57-.74z"/>
  </svg>
);
const SaveIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1-4L9 7m3-4v4m0 0l-3 3" />
  </svg>
);
const CopyIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-gray-400 group-hover:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
    </svg>
);
const SearchIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
);
const DashboardIcon = ({ className }) => (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
    </svg>
);


const categories = [
  'None', 'All', 'Dentist', 'Children doctor', 'Eye', 'Ent', 'Physiotherapist', 'Skin', 'Orthopadic', 
  'Cardiologist', 'Neurologist', 'Oncologist', 'Gynecologist', 'Pathologist', 'Lungs', 
  'Veterinary', 'Radiologist', 'Ayurvedic', 'Other Doctor', 'Car Rental', 'Other',
];

const languages = ['All', 'English', 'Gujarati', 'Hindi'];

function App() {
  // --- State Management ---
  const [userId, setUserId] = useState(null);
  const [frames, setFrames] = useState([]);
  const [dailyImage, setDailyImage] = useState(null);
  const [generatedPosts, setGeneratedPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [authReady, setAuthReady] = useState(false);
  const [error, setError] = useState(null);
  const [newFrameName, setNewFrameName] = useState('');
  const [newFrameFile, setNewFrameFile] = useState(null);
  const [newFrameNumber, setNewFrameNumber] = useState('');
  const [newFrameCategory, setNewFrameCategory] = useState('');
  const [newFrameLanguage, setNewFrameLanguage] = useState('');
  const [newStartDate, setNewStartDate] = useState('');
  const [newEndDate, setNewEndDate] = useState('');
  const [showModal, setShowModal] = useState(false);
  const [modalMessage, setModalMessage] = useState('');
  const [modalTitle, setModalTitle] = useState('Error');
  const [modalConfig, setModalConfig] = useState(null); // For confirmation modals
  const [filterCategory, setFilterCategory] = useState('All');
  const [filterLanguage, setFilterLanguage] = useState('All');
  const [manageFilterCategory, setManageFilterCategory] = useState('None');
  const [manageFilterLanguage, setManageFilterLanguage] = useState('All');
  const [editModalOpen, setEditModalOpen] = useState(false);
  const [editingFrame, setEditingFrame] = useState(null);
  const [editingFrameFile, setEditingFrameFile] = useState(null);
  const [currentPage, setCurrentPage] = useState('home');
  const [dashboardStats, setDashboardStats] = useState({ total: 0, active: 0, expiring: 0, expired: 0 });
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedFrames, setSelectedFrames] = useState([]);
  const [activeDashboardFilter, setActiveDashboardFilter] = useState('all'); // 'all', 'active', 'expiring', 'expired'


  // --- Firestore Path ---
  const framesCollectionPath = userId ? `artifacts/${appId}/users/${userId}/frames` : null;

  // --- Utility Functions ---
  const showCustomModal = (message, title = 'Error', onConfirm = null) => {
    if (onConfirm) {
        setModalConfig({ message, title, onConfirm });
    } else {
        setModalMessage(message);
        setModalTitle(title);
        setShowModal(true);
    }
  };

  // --- Firestore Functions ---
  const saveFramesToFirestore = async (newFrame) => {
    if (!userId) {
      setError("User not authenticated. Cannot save frames.");
      return;
    }
    const docRef = doc(collection(db, framesCollectionPath));
    try {
      await setDoc(docRef, {
        frameName: newFrame.name,
        frameUrl: newFrame.url,
        whatsappNumber: newFrame.whatsappNumber,
        category: newFrame.category,
        language: newFrame.language,
        startDate: newFrame.startDate,
        endDate: newFrame.endDate,
        createdAt: new Date().toISOString(),
      });
      setNewFrameName('');
      setNewFrameFile(null);
      setNewFrameNumber('');
      setNewFrameCategory('');
      setNewFrameLanguage('');
      setNewStartDate('');
      setNewEndDate('');
    } catch (e) {
      console.error("Error adding document: ", e);
      setError("Failed to save frame. Please try again.");
    }
  };

  const handleUpdateFrame = async () => {
    if (!editingFrame) return;

    const processUpdate = async (frameData) => {
        const docRef = doc(db, framesCollectionPath, editingFrame.id);
        try {
            await setDoc(docRef, frameData, { merge: true });
            setEditModalOpen(false);
            setEditingFrame(null);
            setEditingFrameFile(null);
        } catch (e) {
            console.error("Error updating document: ", e);
            setError("Failed to update frame. Please try again.");
        }
    };

    if (editingFrameFile) {
        const reader = new FileReader();
        reader.onload = async (event) => {
            const updatedFrameData = {
                ...editingFrame,
                frameUrl: event.target.result,
            };
            await processUpdate(updatedFrameData);
        };
        reader.readAsDataURL(editingFrameFile);
    } else {
        await processUpdate(editingFrame);
    }
  };

  const deleteFramesFromFirestore = async (frameIds) => {
    if (!userId || frameIds.length === 0) return;
    const batch = writeBatch(db);
    frameIds.forEach(id => {
        const frameDocRef = doc(db, framesCollectionPath, id);
        batch.delete(frameDocRef);
    });
    try {
        await batch.commit();
        setSelectedFrames([]); // Clear selection after deletion
    } catch (e) {
        console.error("Error deleting documents: ", e);
        setError("Failed to delete selected frames. Please try again.");
    }
  };

  // --- Authentication and Data Fetching ---
  useEffect(() => {
    const signIn = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined') {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (error) {
        console.error("Firebase authentication failed:", error);
        setError("Authentication failed. Please refresh the page.");
      }
    };
    signIn();
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUserId(user ? user.uid : null);
      setAuthReady(true);
    });
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!authReady || !userId) return;
    const framesCol = collection(db, framesCollectionPath);
    const unsubscribe = onSnapshot(framesCol, (snapshot) => {
      const fetchedFrames = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data(),
      }));
      setFrames(fetchedFrames);
    }, (e) => {
      console.error("Error setting up Firestore listener:", e);
      setError("Failed to load frames from the database.");
    });
    return () => unsubscribe();
  }, [authReady, userId, framesCollectionPath]);
  
  // --- Dashboard Stats Calculation ---
  useEffect(() => {
    const today = new Date();
    today.setHours(0, 0, 0, 0); // Normalize today's date
    const thirtyDaysFromNow = new Date();
    thirtyDaysFromNow.setDate(today.getDate() + 30);

    const stats = frames.reduce((acc, frame) => {
        acc.total += 1;
        const endDate = frame.endDate ? new Date(frame.endDate) : null;
        if (endDate) {
            endDate.setHours(0, 0, 0, 0); // Normalize end date
            if (endDate < today) {
                acc.expired += 1;
            } else {
                acc.active += 1;
                if (endDate <= thirtyDaysFromNow) {
                    acc.expiring += 1;
                }
            }
        } else {
            // If no end date, consider it active but not expiring
            acc.active += 1;
        }
        return acc;
    }, { total: 0, active: 0, expiring: 0, expired: 0 });
    setDashboardStats(stats);
  }, [frames]);


  // --- Event Handlers ---
  const handleFrameFileUpload = (e) => {
    const file = e.target.files[0];
    if (file) setNewFrameFile(file);
  };

  const handleAddNewFrame = () => {
    if (!newFrameFile || !newFrameName || !newFrameNumber || !newFrameCategory || !newFrameLanguage || !newStartDate || !newEndDate) {
      setError("Please fill in all frame details including start and end dates.");
      return;
    }
    const reader = new FileReader();
    reader.onload = (event) => {
      saveFramesToFirestore({ 
        name: newFrameName, 
        url: event.target.result, 
        whatsappNumber: newFrameNumber,
        category: newFrameCategory,
        language: newFrameLanguage,
        startDate: newStartDate,
        endDate: newEndDate,
      });
    };
    reader.readAsDataURL(newFrameFile);
  };

  const handleDailyImageUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => setDailyImage(event.target.result);
      reader.readAsDataURL(file);
    }
  };

  const generatePosts = async () => {
    const filteredFrames = frames.filter(frame => {
        const isCategoryMatch = filterCategory === 'All' || frame.category === filterCategory;
        const isLanguageMatch = filterLanguage === 'All' || frame.language === filterLanguage;
        return isCategoryMatch && isLanguageMatch;
    });

    if (!dailyImage || filteredFrames.length === 0) {
      setError("Please upload a daily image and select at least one client's frame using the filters.");
      return;
    }
    setLoading(true);
    setGeneratedPosts([]);
    setError(null);

    const posts = [];
    const dailyImg = new Image();
    dailyImg.src = dailyImage;
    await new Promise(resolve => { dailyImg.onload = resolve; });

    for (const frame of filteredFrames) {
      const frameImg = new Image();
      frameImg.src = frame.frameUrl;
      await new Promise(resolve => { frameImg.onload = resolve; });

      const canvas = document.createElement('canvas');
      canvas.width = frameImg.width;
      canvas.height = frameImg.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(dailyImg, 0, 0, canvas.width, canvas.height);
      ctx.drawImage(frameImg, 0, 0, canvas.width, canvas.height);
      posts.push({
        id: frame.id,
        name: frame.frameName,
        whatsappNumber: frame.whatsappNumber,
        url: canvas.toDataURL('image/png'),
      });
    }
    setGeneratedPosts(posts);
    setLoading(false);
  };

  const downloadPost = (post) => {
    const link = document.createElement('a');
    link.href = post.url;
    link.download = `post_${post.whatsappNumber}.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const downloadOriginalFrame = (frame) => {
    const link = document.createElement('a');
    link.href = frame.frameUrl;
    link.download = `original_frame_${frame.frameName.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const downloadAllAsPngs = async () => {
    if (generatedPosts.length === 0) {
      setError("No posts to download.");
      return;
    }
    setLoading(true);
    for (const post of generatedPosts) {
      downloadPost(post);
      await new Promise(resolve => setTimeout(resolve, 300));
    }
    setLoading(false);
  };

  const sendToWhatsapp = (post) => {
    if (!post.whatsappNumber) {
      showCustomModal("No WhatsApp number provided for this client's frame. Please add a number before sending.");
      return;
    }
    const message = encodeURIComponent(`Hello ${post.name}, here is your daily social media post!`);
    const whatsappUrl = `https://wa.me/${post.whatsappNumber}?text=${message}`;
    window.open(whatsappUrl, '_blank');
  };

  const handleStartDateChange = (dateString, dateSetter, endDateSetter) => {
    dateSetter(dateString);
    if (dateString) {
      const startDate = new Date(dateString);
      const endDate = new Date(startDate);
      endDate.setDate(startDate.getDate() + 365);
      const year = endDate.getFullYear();
      const month = String(endDate.getMonth() + 1).padStart(2, '0');
      const day = String(endDate.getDate()).padStart(2, '0');
      const formattedEndDate = `${year}-${month}-${day}`;
      endDateSetter(formattedEndDate);
    } else {
      endDateSetter('');
    }
  };

  const copyToClipboard = (textToCopy) => {
    const textArea = document.createElement('textarea');
    textArea.value = textToCopy;
    document.body.appendChild(textArea);
    textArea.select();
    try {
        document.execCommand('copy');
        showCustomModal(`${textToCopy} copied to clipboard!`, 'Success');
    } catch (err) {
        console.error('Failed to copy text: ', err);
        setError('Failed to copy number. Please copy it manually.');
    }
    document.body.removeChild(textArea);
  };
  
  const handleDashboardFilterClick = (filter) => {
    setActiveDashboardFilter(filter);
    setCurrentPage('manage');
    // Reset other filters for clarity
    setManageFilterCategory('All');
    setManageFilterLanguage('All');
    setSearchTerm('');
  };

  // --- Components ---
  const Dashboard = ({ stats, onFilterClick }) => (
    <section className="bg-gray-800 rounded-2xl shadow-xl p-6 mb-8">
        <h2 className="text-2xl font-bold text-gray-100 mb-4 flex items-center"><DashboardIcon className="h-6 w-6 mr-2" /> Dashboard</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-center">
            <button onClick={() => onFilterClick('all')} className="bg-gray-700 p-4 rounded-xl text-left hover:bg-gray-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <p className="text-3xl font-bold text-blue-400">{stats.total}</p>
                <p className="text-sm text-gray-300">Total Clients</p>
            </button>
            <button onClick={() => onFilterClick('active')} className="bg-gray-700 p-4 rounded-xl text-left hover:bg-gray-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-green-500">
                <p className="text-3xl font-bold text-green-400">{stats.active}</p>
                <p className="text-sm text-gray-300">Active Clients</p>
            </button>
            <button onClick={() => onFilterClick('expiring')} className="bg-gray-700 p-4 rounded-xl text-left hover:bg-gray-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500">
                <p className="text-3xl font-bold text-yellow-400">{stats.expiring}</p>
                <p className="text-sm text-gray-300">Expiring in 30 Days</p>
            </button>
            <button onClick={() => onFilterClick('expired')} className="bg-gray-700 p-4 rounded-xl text-left hover:bg-gray-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-red-500">
                <p className="text-3xl font-bold text-red-400">{stats.expired}</p>
                <p className="text-sm text-gray-300">Expired Clients</p>
            </button>
        </div>
    </section>
  );

  const HomePage = () => (
    <>
      <Dashboard stats={dashboardStats} onFilterClick={handleDashboardFilterClick} />
      <section className="bg-gray-800 rounded-2xl shadow-xl p-6 mb-8">
        <h2 className="text-2xl font-bold text-gray-100 mb-4">Upload Daily Image & Generate Posts</h2>
        <div className="flex flex-col sm:flex-row items-center gap-4 mb-4">
          <label htmlFor="daily-image-upload" className="flex items-center justify-center bg-gray-600 hover:bg-gray-700 text-white font-semibold py-3 px-6 rounded-xl transition-colors duration-300 cursor-pointer shadow-lg w-full sm:w-auto">
              <UploadIcon />
              <span className="ml-2">Upload Daily Image</span>
          </label>
          <input
            id="daily-image-upload"
            type="file"
            accept="image/*"
            className="hidden"
            onChange={handleDailyImageUpload}
          />
          <button
            onClick={generatePosts}
            className={`flex items-center justify-center font-semibold py-3 px-6 rounded-xl transition-colors duration-300 shadow-lg w-full sm:w-auto
              ${(dailyImage && frames.length > 0) ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-gray-700 text-gray-400 cursor-not-allowed'}`}
            disabled={!dailyImage || frames.length === 0 || loading}
          >
            <GenerateIcon />
            <span className="ml-2">{loading ? 'Generating...' : 'Generate Posts'}</span>
          </button>
        </div>
        <div className="flex flex-col sm:flex-row gap-4 mb-4">
          <select
            value={filterCategory}
            onChange={(e) => setFilterCategory(e.target.value)}
            className="w-full px-4 py-3 bg-gray-700 text-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            {categories.map(cat => (
              <option key={cat} value={cat}>{cat}</option>
            ))}
          </select>
          <select
            value={filterLanguage}
            onChange={(e) => setFilterLanguage(e.target.value)}
            className="w-full px-4 py-3 bg-gray-700 text-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            {languages.map(lang => (
              <option key={lang} value={lang}>{lang}</option>
            ))}
          </select>
        </div>
        {dailyImage && (
          <div className="mt-6 p-4 rounded-xl border border-gray-700 bg-gray-700">
            <h3 className="text-lg font-semibold text-gray-200 mb-2">Daily Image Preview:</h3>
            <img src={dailyImage} alt="Daily Post" className="w-40 h-auto rounded-lg" />
          </div>
        )}
      </section>

      <section className="bg-gray-800 rounded-2xl shadow-xl p-6">
        <h2 className="text-2xl font-bold text-gray-100 mb-4">Generated Posts</h2>
        {generatedPosts.length > 0 ? (
          <>
            <div className="flex flex-col sm:flex-row justify-end gap-2 mb-4">
              <button
                onClick={downloadAllAsPngs}
                className="flex items-center justify-center bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300"
                disabled={loading}
              >
                <DownloadIcon />
                <span className="ml-2">{loading ? 'Downloading...' : 'Download All (PNG)'}</span>
              </button>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
              {generatedPosts.map((post) => (
                <div key={post.id} className="bg-gray-700 rounded-xl shadow-md overflow-hidden">
                  <img src={post.url} alt={`Generated post for ${post.name}`} className="w-full h-auto object-cover" />
                  <div className="p-4 flex flex-col items-center gap-2">
                    <span className="text-sm font-medium text-gray-200 text-center truncate w-full">{post.name}</span>
                    <div className="group flex items-center justify-between w-full bg-gray-800 rounded-lg p-2">
                        <span className="text-sm text-gray-300 truncate">{post.whatsappNumber}</span>
                        <button onClick={() => copyToClipboard(post.whatsappNumber)} className="ml-2 p-1 rounded-md hover:bg-gray-600" title="Copy number">
                            <CopyIcon />
                        </button>
                    </div>
                    <button
                      onClick={() => sendToWhatsapp(post)}
                      className="flex items-center justify-center bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300 w-full"
                    >
                      <WhatsappIcon />
                      <span className="ml-2">Send to WhatsApp</span>
                    </button>
                    <button
                      onClick={() => downloadPost(post)}
                      className="flex items-center justify-center bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300 w-full"
                    >
                      <DownloadIcon />
                      <span className="ml-2">Download</span>
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </>
        ) : (
          <p className="text-gray-400 text-center py-4">Generated posts will appear here after you click 'Generate Posts'.</p>
        )}
      </section>
    </>
  );

  const ManageFramesPage = () => {
    const getStatus = (endDate) => {
        if (!endDate) return { className: 'bg-gray-500', title: 'No End Date' };
        const today = new Date();
        const end = new Date(endDate);
        const thirtyDaysFromNow = new Date();
        thirtyDaysFromNow.setDate(today.getDate() + 30);

        today.setHours(0, 0, 0, 0);
        end.setHours(0, 0, 0, 0);

        if (end < today) return { className: 'bg-red-500', title: 'Expired' };
        if (end <= thirtyDaysFromNow) return { className: 'bg-yellow-500', title: 'Expiring Soon' };
        return { className: 'bg-green-500', title: 'Active' };
    };

    const filteredByDashboard = frames.filter(frame => {
        if (activeDashboardFilter === 'all') return true;
        
        const today = new Date();
        const end = frame.endDate ? new Date(frame.endDate) : null;
        
        if (!end) {
            // Treat frames without an end date as 'active' only. They can't be expired or expiring.
            return activeDashboardFilter === 'active';
        }
        
        const thirtyDaysFromNow = new Date();
        thirtyDaysFromNow.setDate(today.getDate() + 30);
        today.setHours(0, 0, 0, 0);
        end.setHours(0, 0, 0, 0);

        const isExpired = end < today;
        const isActive = end >= today;
        const isExpiring = isActive && end <= thirtyDaysFromNow;

        if (activeDashboardFilter === 'expired') return isExpired;
        if (activeDashboardFilter === 'expiring') return isExpiring;
        if (activeDashboardFilter === 'active') return isActive;

        return true;
    });

    const managedFrames = filteredByDashboard.filter(frame => {
        if (manageFilterCategory === 'None') return false;
        
        const categoryMatch = manageFilterCategory === 'All' || frame.category === manageFilterCategory;
        const languageMatch = manageFilterLanguage === 'All' || frame.language === manageFilterLanguage;
        const searchMatch = !searchTerm || frame.frameName.toLowerCase().includes(searchTerm.toLowerCase()) || frame.whatsappNumber.includes(searchTerm);
        return categoryMatch && languageMatch && searchMatch;
    });

    const handleSelectFrame = (frameId) => {
        setSelectedFrames(prev => 
            prev.includes(frameId) ? prev.filter(id => id !== frameId) : [...prev, frameId]
        );
    };
    
    const handleSelectAll = (e) => {
        if (e.target.checked) {
            setSelectedFrames(managedFrames.map(f => f.id));
        } else {
            setSelectedFrames([]);
        }
    };

    const handleDeleteSelected = () => {
        showCustomModal(
            `Are you sure you want to delete ${selectedFrames.length} selected frame(s)? This action cannot be undone.`,
            'Confirm Deletion',
            () => deleteFramesFromFirestore(selectedFrames)
        );
    };

    return (
      <div className="bg-gray-800 rounded-2xl shadow-xl p-6">
        <h2 className="text-2xl font-bold text-gray-100 mb-4">Manage Client Frames</h2>
        <div className="flex flex-col gap-4 mb-6 border-b border-gray-700 pb-6">
          {/* Add Frame Form */}
          <input type="text" placeholder="Client's Name" value={newFrameName} onChange={(e) => setNewFrameName(e.target.value)} className="w-full px-4 py-3 bg-gray-700 text-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"/>
          <input type="tel" placeholder="WhatsApp Number" value={newFrameNumber} onChange={(e) => setNewFrameNumber(e.target.value)} className="w-full px-4 py-3 bg-gray-700 text-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"/>
          <select value={newFrameCategory} onChange={(e) => setNewFrameCategory(e.target.value)} className="w-full px-4 py-3 bg-gray-700 text-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">Select Category</option>
            {categories.filter(c => c !== 'All' && c !== 'None').map(cat => (<option key={cat} value={cat}>{cat}</option>))}
          </select>
          <select value={newFrameLanguage} onChange={(e) => setNewFrameLanguage(e.target.value)} className="w-full px-4 py-3 bg-gray-700 text-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">Select Language</option>
            {languages.filter(l => l !== 'All').map(lang => (<option key={lang} value={lang}>{lang}</option>))}
          </select>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div><label className="block text-sm font-medium text-gray-300">Start Date<input type="date" value={newStartDate} onChange={e => handleStartDateChange(e.target.value, setNewStartDate, setNewEndDate)} className="w-full mt-1 px-4 py-3 bg-gray-700 text-gray-200 rounded-xl"/></label></div>
            <div><label className="block text-sm font-medium text-gray-300">End Date<input type="date" value={newEndDate} readOnly className="w-full mt-1 px-4 py-3 bg-gray-600 text-gray-400 rounded-xl cursor-not-allowed"/></label></div>
          </div>
          <div className="flex items-center justify-between gap-4">
            <label htmlFor="new-frame-file" className="flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-xl cursor-pointer flex-grow"><UploadIcon /><span className="ml-2">{newFrameFile ? newFrameFile.name : 'Choose Frame File'}</span></label>
            <input id="new-frame-file" type="file" accept="image/*" className="hidden" onChange={handleFrameFileUpload}/>
            <button onClick={handleAddNewFrame} className={`flex items-center justify-center font-semibold py-3 px-6 rounded-xl shadow-lg ${(newFrameName && newFrameFile && newFrameNumber) ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-gray-700 text-gray-400 cursor-not-allowed'}`} disabled={!newFrameName || !newFrameFile || !newFrameNumber}><SaveIcon /><span className="ml-2">Save Frame</span></button>
          </div>
        </div>
        
        <div className="mt-6">
          <h3 className="text-xl font-semibold text-gray-200 mb-3">Your Saved Frames ({managedFrames.length} found)</h3>
          {activeDashboardFilter !== 'all' && (
            <div className="bg-blue-900/50 border border-blue-700 text-blue-200 px-4 py-2 rounded-lg mb-4 flex items-center justify-between">
                <span className="text-sm">Filtering by: <strong className="font-semibold capitalize">{activeDashboardFilter} Clients</strong></span>
                <button onClick={() => setActiveDashboardFilter('all')} className="font-bold text-xl leading-none hover:text-white transition-colors">&times;</button>
            </div>
           )}
          <div className="flex flex-col sm:flex-row gap-4 mb-4">
            <div className="relative flex-grow">
                <input type="text" placeholder="Search by name or number..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-3 bg-gray-700 text-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"/>
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><SearchIcon /></div>
            </div>
            <select value={manageFilterCategory} onChange={(e) => setManageFilterCategory(e.target.value)} className="w-full sm:w-1/3 px-4 py-3 bg-gray-700 text-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">{categories.map(cat => (<option key={cat} value={cat}>{cat}</option>))}</select>
            <select value={manageFilterLanguage} onChange={(e) => setManageFilterLanguage(e.target.value)} className="w-full sm:w-1/3 px-4 py-3 bg-gray-700 text-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">{languages.map(lang => (<option key={lang} value={lang}>{lang}</option>))}</select>
          </div>
          
          {selectedFrames.length > 0 && (
            <div className="bg-gray-700 p-2 rounded-lg mb-4 flex items-center justify-between">
                <span className="text-sm text-gray-300">{selectedFrames.length} frame(s) selected.</span>
                <button onClick={handleDeleteSelected} className="bg-red-600 hover:bg-red-700 text-white font-bold py-1 px-3 rounded-md text-sm">Delete Selected</button>
            </div>
          )}

          <div className="flex flex-col gap-2">
            {managedFrames.length > 0 && (
                <div className="group flex items-center justify-between bg-gray-900 p-3 rounded-xl">
                    <div className="flex items-center"><input type="checkbox" onChange={handleSelectAll} checked={selectedFrames.length === managedFrames.length && managedFrames.length > 0} className="h-4 w-4 rounded text-blue-600 bg-gray-700 border-gray-600 focus:ring-blue-500" /><span className="ml-3 text-sm font-medium text-gray-100">Select All</span></div>
                </div>
            )}
            {managedFrames.map((frame) => {
              const status = getStatus(frame.endDate);
              return (
                <div key={frame.id} className="group flex items-center justify-between bg-gray-700 hover:bg-gray-600 p-3 rounded-xl transition-colors duration-300">
                  <div className="flex items-center flex-grow min-w-0">
                    <input type="checkbox" checked={selectedFrames.includes(frame.id)} onChange={() => handleSelectFrame(frame.id)} className="h-4 w-4 rounded text-blue-600 bg-gray-700 border-gray-600 focus:ring-blue-500"/>
                    <div className="flex items-center ml-3 min-w-0">
                      <span className={`h-2.5 w-2.5 rounded-full ${status.className} mr-2 flex-shrink-0`} title={status.title}></span>
                      <div className="flex-grow min-w-0">
                        <p className="text-sm font-medium text-gray-100 truncate">{frame.frameName}</p>
                        {(frame.startDate || frame.endDate) && (<p className="text-xs text-gray-400 truncate">{frame.startDate} to {frame.endDate}</p>)}
                      </div>
                    </div>
                  </div>
                  <div className="flex items-center gap-2 flex-shrink-0 ml-2">
                    <button onClick={() => downloadOriginalFrame(frame)} className="p-1 rounded-full" title="Download Original Frame"><FrameDownloadIcon /></button>
                    <button onClick={() => { setEditingFrame(frame); setEditingFrameFile(null); setEditModalOpen(true); }} className="p-1 rounded-full" title="Edit Frame"><EditIcon /></button>
                    <button onClick={() => showCustomModal(`Delete ${frame.frameName}?`, 'Confirm Deletion', () => deleteFramesFromFirestore([frame.id]))} className="p-1 rounded-full" title="Delete Frame"><DeleteIcon /></button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-900 text-white p-8 font-inter flex flex-col">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
        input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
            cursor: pointer;
            transform: scale(1.5);
            margin-right: 0.5rem;
        }
      `}</style>

      {/* --- Modals --- */}
      {showModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
          <div className="bg-gray-800 p-8 rounded-lg shadow-xl text-center max-w-sm mx-4">
            <h3 className="text-xl font-bold text-white mb-4">{modalTitle}</h3>
            <p className="text-gray-300 mb-6">{modalMessage}</p>
            <button onClick={() => setShowModal(false)} className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">Close</button>
          </div>
        </div>
      )}

      {modalConfig && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
            <div className="bg-gray-800 p-8 rounded-lg shadow-xl text-center max-w-sm mx-4">
                <h3 className="text-xl font-bold text-white mb-4">{modalConfig.title}</h3>
                <p className="text-gray-300 mb-6">{modalConfig.message}</p>
                <div className="flex justify-center gap-4">
                    <button onClick={() => setModalConfig(null)} className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-6 rounded-lg">Cancel</button>
                    <button onClick={() => { modalConfig.onConfirm(); setModalConfig(null); }} className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg">Confirm</button>
                </div>
            </div>
        </div>
      )}

      {editModalOpen && editingFrame && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
          <div className="bg-gray-800 p-8 rounded-lg shadow-xl text-center max-w-lg w-full mx-4">
            <h3 className="text-xl font-bold text-white mb-4">Edit Frame</h3>
            <div className="flex flex-col gap-4">
              <input type="text" placeholder="Client's Name" value={editingFrame.frameName} onChange={(e) => setEditingFrame({ ...editingFrame, frameName: e.target.value })} className="w-full px-4 py-3 bg-gray-700 text-gray-200 rounded-xl"/>
              <input type="tel" placeholder="WhatsApp Number" value={editingFrame.whatsappNumber} onChange={(e) => setEditingFrame({ ...editingFrame, whatsappNumber: e.target.value })} className="w-full px-4 py-3 bg-gray-700 text-gray-200 rounded-xl"/>
              <select value={editingFrame.category} onChange={(e) => setEditingFrame({ ...editingFrame, category: e.target.value })} className="w-full px-4 py-3 bg-gray-700 text-gray-200 rounded-xl">{categories.filter(c => c !== 'All' && c !== 'None').map(cat => (<option key={cat} value={cat}>{cat}</option>))}</select>
              <select value={editingFrame.language} onChange={(e) => setEditingFrame({ ...editingFrame, language: e.target.value })} className="w-full px-4 py-3 bg-gray-700 text-gray-200 rounded-xl">{languages.map(lang => (<option key={lang} value={lang}>{lang}</option>))}</select>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div><label className="block text-sm font-medium text-gray-300 text-left">Start Date<input type="date" value={editingFrame.startDate || ''} onChange={e => handleStartDateChange(e.target.value, (val) => setEditingFrame({...editingFrame, startDate: val}), (val) => setEditingFrame(prev => ({...prev, endDate: val})))} className="w-full mt-1 px-4 py-3 bg-gray-700 text-gray-200 rounded-xl"/></label></div>
                <div><label className="block text-sm font-medium text-gray-300 text-left">End Date<input type="date" value={editingFrame.endDate || ''} readOnly className="w-full mt-1 px-4 py-3 bg-gray-600 text-gray-400 rounded-xl cursor-not-allowed"/></label></div>
              </div>
               <label htmlFor="edit-frame-file" className="flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-xl cursor-pointer text-sm"><UploadIcon /><span className="ml-2">{editingFrameFile ? editingFrameFile.name : 'Change Frame Image'}</span></label>
              <input id="edit-frame-file" type="file" accept="image/*" className="hidden" onChange={(e) => setEditingFrameFile(e.target.files[0])}/>
              <div className="flex items-center justify-between gap-4">
                <button onClick={handleUpdateFrame} className="flex items-center justify-center font-semibold py-3 px-6 rounded-xl bg-green-600 hover:bg-green-700 text-white flex-grow"><SaveIcon /><span className="ml-2">Save Changes</span></button>
                <button onClick={() => setEditModalOpen(false)} className="flex items-center justify-center font-semibold py-3 px-6 rounded-xl bg-gray-600 hover:bg-gray-700 text-white">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      )}

      <header className="w-full max-w-full text-center mb-8">
        <h1 className="text-4xl font-extrabold text-blue-400">Unified Social Media Post & WhatsApp Sender</h1>
        <p className="mt-2 text-gray-300">
          Upload frames and daily images, then instantly generate and send personalized posts.
        </p>
        <div className="mt-4 text-sm text-gray-400">
          User ID: <span className="font-mono text-gray-200 break-all">{userId || 'Loading...'}</span>
        </div>
      </header>

      {/* Navigation */}
      <nav className="mb-8 flex justify-center space-x-4">
        <button
          onClick={() => setCurrentPage('home')}
          className={`py-2 px-6 rounded-lg font-semibold transition-colors duration-300
            ${currentPage === 'home' ? 'bg-blue-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}`}
        >
          Generate Posts
        </button>
        <button
          onClick={() => setCurrentPage('manage')}
          className={`py-2 px-6 rounded-lg font-semibold transition-colors duration-300
            ${currentPage === 'manage' ? 'bg-blue-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}`}
        >
          Manage Frames
        </button>
      </nav>

      {/* Page Content */}
      <main className="w-full max-w-4xl mx-auto">
        {error && (
          <div className="bg-red-800 text-white p-4 rounded-lg shadow-lg mb-6 w-full text-center">
            {error}
          </div>
        )}
        {currentPage === 'home' && <HomePage />}
        {currentPage === 'manage' && <ManageFramesPage />}
      </main>
    </div>
  );
}

export default App;